<template>
  <div class="row q-col-gutter-sm">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <q-card class="text-grey-8 no-shadow" bordered>
        <q-card-section class="q-pa-none">
          <q-scroll-area style="height: 300px">
            <q-table
              class="no-shadow"
              :rows="rows"
              title="页面访问数据"
              :hide-header="false"
              :columns="columns"
              row-key="name"
              :filter="filter"
              v-model:pagination="pagination"
            >
              <template v-slot:top-right="props">
                <q-input
                  borderless
                  dense
                  debounce="300"
                  v-model="filter"
                  placeholder="搜索"
                >
                  <template v-slot:append>
                    <q-icon name="search" />
                  </template>
                </q-input>

                <q-btn
                  flat
                  round
                  dense
                  :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                  @click="props.toggleFullscreen"
                  v-if="mode === 'list'"
                  class="q-px-sm"
                >
                  <q-tooltip :disable="$q.platform.is.mobile" v-close-popup
                    >{{
                      props.inFullscreen
                        ? 'Exit Fullscreen'
                        : 'Toggle Fullscreen'
                    }}
                  </q-tooltip>
                </q-btn>

                <q-btn
                  color="primary"
                  icon-right="archive"
                  label="导出CVS"
                  no-caps
                  @click="exportTable"
                />
              </template>
            </q-table>
          </q-scroll-area>
        </q-card-section>
      </q-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { QTableProps, useQuasar, exportFile } from 'quasar';
import { ref } from 'vue';

const $q = useQuasar();
const filter = ref('');

const columns: QTableProps['columns'] = [
  { name: 'id', align: 'left', label: '用户ID', field: 'id', sortable: true },
  {
    name: 'user_name',
    align: 'left',
    label: '用户名',
    field: 'user_name',
    sortable: true,
  },
  {
    name: 'desc',
    required: true,
    label: '页面',
    align: 'left',
    field: (row) => row.name,
    sortable: true,
  },
  {
    name: 'date',
    align: 'right',
    label: '日期',
    field: 'date',
    sortable: true,
  },
];
const rows = [
  {
    id: 'U0001',
    name: '/login',
    date: '12-10-2019',
    user_name: 'Pratik Patel',
  },
  {
    id: 'U0002',
    name: '/Dashboard',
    date: '11-02-2019',
    user_name: 'Razvan Stoenescu',
  },
  {
    id: 'U0003',
    name: '/Map',
    date: '03-25-2019',
    user_name: 'Pratik Patel',
  },
  {
    id: 'U0004',
    name: '/Mail',
    date: '03-18-2019',
    user_name: 'Jeff Galbraith',
  },
  {
    id: 'U0005',
    name: '/Profile',
    date: '04-09-2019',
    user_name: 'Pratik Patel',
  },
];

const mode = 'list';

const pagination = {
  rowsPerPage: 10,
};

function wrapCsvValue(val: string, formatFn?: (val: string) => string) {
  let formatted = formatFn !== void 0 ? formatFn(val) : val;

  formatted =
    formatted === void 0 || formatted === null ? '' : String(formatted);

  formatted = formatted.split('"').join('""');
  /**
   * Excel accepts \n and \r in strings, but some other CSV parsers do not
   * Uncomment the next two lines to escape new lines
   */
  // .split('\n').join('\\n')
  // .split('\r').join('\\r')

  return `"${formatted}"`;
}
const exportTable = () => {
  // naive encoding to csv format
  const content = [columns.map((col) => wrapCsvValue(col.label))]
    .concat(
      rows.map((row) =>
        columns
          .map((col) =>
            wrapCsvValue(
              typeof col.field === 'function'
                ? col.field(row)
                : row[
                    (col.field === void 0
                      ? col.name
                      : col.field) as keyof typeof row
                  ],
              col.format as (val: string) => string
            )
          )
          .join(',')
      )
    )
    .join('\r\n');

  const status = exportFile('table-export.csv', content, 'text/csv');

  if (status !== true) {
    $q.notify({
      message: '下载文件失败...',
      color: 'negative',
      icon: 'warning',
    });
  }
};
</script>
